import React,{useState} from 'react'
/* 
    函数组件操作状态使用useState完成，useState是Hook提供的一个钩子函数，具体操作步骤如下
    hook中的函数都存在与react包
    1）导入useState
    import {useState} from 'react'
    2）在函数组件中，调用useState函数,所传递参数就是状态的初始值，返回值是一个数组,数组的第一位就是状态的变量名
       数组的第二位就是修改变量的方法
       const [变量名,set变量名]=useState(初始值)
    3) 函数组件中使用状态:{变量名}
*/
export default function Counter(props) {
  //const [count,setCount]=useState(10)
  /*
    useState的参数可以是一个普通数据，也可以一个回调函数
    如果是一个普通的数据，那么就直接写入初始值，如果初始值想要调用者自己去决定，那么就可以使用回调函数的方式来通过外部指定
  */
  const [count,setCount]=useState(()=>{
    return props.n
  })
  const increment=()=>{
    setCount(count+1) 
  }
  return (
    <div>
        <h1>计数器:{count}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}
